import React from 'react';
import { connect } from 'dva';
import { NavBar } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import styles from './ItemListPage.css';


class ItemListPage extends React.Component {

  componentDidMount() {
    this.loadData();
  }

  loadData() {
    this.props.dispatch({
      type: 'itemList/firstLoadData'
    });
  }

  render() {

    const { itemList: {
      showContent,
    },
      location: {
        query: {
          payload
        }
      }
    } = this.props;

    return (
      <div>
        <NavBar
          mode="light"
          onLeftClick={()=>{
            this.props.dispatch(routerRedux.goBack())
          }}
        >
          商品列表
        </NavBar>
        {payload}
        {showContent && this.renderContent()}
      </div>
    );
  }

  renderContent() {

    const { itemList: {
      itemList
    } } = this.props;


    return (
      <div>
        {itemList.map((data, index)=>{
          return (
            <div key={index + 'item'} className={styles.cell}>
              <div><img src={data.thumbImg} style={{width:100, height:100}}/></div>
              <div>{data.itemName}</div>
            </div>
          );
        })}
      </div>
    );

  }
}

const mapStateToProps = ({itemList}) => {
  return {itemList};
};

export default connect(mapStateToProps)(ItemListPage);
